<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commonjsp/jstl.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>服务员（用户）组管理</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/theme.css">
<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/reveal.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/bootstrap/css/bootstrap.css">

<script src="${prefix}/lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="${prefix}/lib/ajaxfileupload.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery-form.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery.reveal.js" type="text/javascript"></script>
<!-- Demo page code -->
<style type="text/css">
#line-chart {
	height:300px;
	width:800px;
	margin: 0px auto;
	margin-top: 1em;
}
.brand { font-family: georgia, serif; }
.brand .first {
	color: #ccc;
	font-style: italic;
}
.brand .second {
	color: #fff;
	font-weight: bold;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	//页面准备好以后，查询该操作者可以进行操作的公司信息
	queryCompanySelect();
	
	//当公司选择发生变化时
	$("#companyandstoreSelect").change(function() {
		preQueryAdminuserGroupByCompanyid();
	});
});

//查询这个用户可用的公司信息（可维护的公司信息）
function queryCompanySelect() {
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/company/queryCompany",
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			var listDatas = jsonData.data;
			var optionhtml = "";
			
			//开始构建公司
			for(var index = 0 ; listDatas != null && index < listDatas.length ; index++) {
				var optionItem = listDatas[index];
				
				optionhtml += "<option value=\"" + optionItem.uid + "\" label=\"" + optionItem.companyName + "\" style=\"color: #FF00FF;margin: 2px\" ";
				if(index == 0) {
					optionhtml += " selected ";
				}
				optionhtml += ">" + optionItem.companyName + "</option>";
			}
			
			$("#companyandstoreSelect").html(optionhtml);
			preQueryAdminuserGroupByCompanyid();
		}
	});
}

//查询指定的店面的用户组信息 ，包括系统默认的用户组和管理员自定义的用户组
function preQueryAdminuserGroupByCompanyid() {
	companyid = $("#companyandstoreSelect").val();
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/storeuser/queryStoregroupByCompanyid?companyid=" + companyid,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			reviewTables(jsonData.data);
		}
	});
}

//当收到表格数据后，由这个方法进行表格重绘
function reviewTables(jsonobjects) {
	$("#adminuserGrouptablebodyDiv").html("");
	var htmlbody = "";
	for(var index = 0 ; jsonobjects != null && index < jsonobjects.length ; index++) {
		var groupItem = jsonobjects[index];
		htmlbody += "<tr>";
		htmlbody += "<td>" + groupItem.groupName + "</td>";
		if(groupItem.groupType == 1) {
			htmlbody += "<td>系统默认</td>";
		} else {
			htmlbody += "<td>用户自定</td>";
		}
		htmlbody += "<td align=\"center\" style=\"width: 200px\">" + groupItem.createTime + "</td>";
		htmlbody += "<td align=\"center\">" + groupItem.groupRemark + "</td>";
		if(groupItem.status == 1) {
			htmlbody += "<td>正常</td>";
		} else {
			htmlbody += "<td style=\"color:#FF0000\">禁用</td>";
		}
		//系统用户组不允许编辑
		htmlbody += "<td>";
		if(groupItem.groupType != 1) {
			htmlbody += "<a href=\"javascript:void(0);\" onclick=\"premodifyUseradminGroup('" + groupItem.uid + "')\" style=\"margin-right: 10px\" data-reveal-id=\"myGroupModifyDiv\">编辑</a>";
			if(groupItem.status == 1) {
				htmlbody += "<a href=\"javascript:void(0);\" onclick=\"modifyUsergroupStatus('" + groupItem.uid + "')\" style=\"margin-right: 10px\">作废</a>";
			} else {
				htmlbody += "<a href=\"javascript:void(0);\" onclick=\"modifyUsergroupStatus('" + groupItem.uid + "')\" style=\"margin-right: 10px\">启用</a>";
			}
		} else {
			htmlbody += "&nbsp;";
		}
		htmlbody += "</td>";
		htmlbody += "</tr>";
	}
	
	$("#adminuserGrouptablebodyDiv").html(htmlbody);
}

//创建“用户组”前，对创建表单进行初始化
function precrateUseradminGroup() {
	$("#groupname_create").val();
	$("#groupremark_create").val();
}

function crateUseradminGroup() {
	//首先判断填写的信息是否正确
	var groupname = $.trim($("#groupname_create").val());
	var groupremark = $.trim($("#groupremark_create").val());
	
	var goodForm = true;
	var error = "";
	//首先进行填写资料的判断
	if(groupname == "") {
		goodForm = false;
		error += "请填写用户组名称！<br>";
	}
	
	if(!goodForm) {
		alert(error);
		return;
	}
	
	companyid = $("#companyandstoreSelect").val();
	var data = encodeURI("companyid=" + companyid + "&groupName=" + groupname + "&groupRemark=" + groupremark);
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/storeuser/createStoreUserGroup",
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			preQueryAdminuserGroupByCompanyid();
			alert("添加成功个，您可以继续添加，也可以退出该对话框!");
		}
	});
}

//修改“用户组”前，对创建表单进行初始化
function premodifyUseradminGroup(groupid) {
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/storeuser/queryStoreUsergroup?groupid=" + groupid,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			var group = jsonData.data;
			
			$("#groupname_modify").val(group.groupName);
			$("#groupremark_modify").val(group.groupRemark);
			$("#groupid_modify").val(group.uid);
		}
	});
}

function modifyUseradminGroup() {
	//首先判断填写的信息是否正确
	var groupname = $.trim($("#groupname_modify").val());
	var groupremark = $.trim($("#groupremark_modify").val());
	var groupid = $("#groupid_modify").val();
	
	var goodForm = true;
	var error = "";
	//首先进行填写资料的判断
	if(groupname == "") {
		goodForm = false;
		error += "请填写用户组名称！<br>";
	}
	
	if(!goodForm) {
		alert(error);
		return;
	}
	
	var data = encodeURI("groupid=" + groupid + "&groupName=" + groupname + "&groupRemark=" + groupremark);
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/storeuser/modifyStoreUserGroup",
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			preQueryAdminuserGroupByCompanyid();
			alert("修改成功，您可以继续修改，也可以退出该对话框!");
		}
	});
}

function modifyUsergroupStatus(groupid) {
	$.ajax({
		type: "post",
		async: true, 
		url: "${prefix}/storeuser/modifyUserGroupStatus?groupid=" + groupid, 
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//重新查询列表
			preQueryAdminuserGroupByCompanyid();
		}
	});
}
</script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="${prefix}/javascripts/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="${prefix}/lib/font-awesome/docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<body>
<!--<![endif]-->

<div class="navbar">
	<%@ include file="/commonjsp/userbar.jsp"%>
</div>

<div class="container-fluid">
	<div class="row-fluid">
		<%@ include file="/commonjsp/mainmenu.jsp"%>
		<!-- 列表 -->
		<div class="span9">
			<!-- 列表头 -->
			<h1 class="page-title">服务员分组</h1>
			<div class="btn-toolbar">
				<a href="javascript:void(0);" class="btn btn-primary" onclick="precrateUseradminGroup()" data-reveal-id="myGroupDetailsDiv"><i class="icon-plus"></i> 新建用户组 </a>
				<div class="btn-group"></div>
			</div>
			
			<!-- 公司树 -->
			<div class="well" style="width: 150px;height: 480px; float: left; margin-right:10px ; padding: 5px ; overflow-y:none ; overflow-x:none;">
				<input type="hidden" name="admin_name" id="admin_name" value="${admin.userName }"/>
				<input type="hidden" name="admin_level" id="admin_level" value="${admin.adminLevel }"/>
				<input type="hidden" name="admin_companyid" id="admin_companyid" value="${admin.company.uid }"/>
				<select style="width: 100% ; height: 100% ; border: 0px" multiple="multiple" name="companyandstoreSelect" id="companyandstoreSelect">
					
				</select>
			</div>
			
			<!-- 列表正文 -->
			<div class="well" style="float: left; min-width: 900px; margin-top: 5px">
				<table class="table">
					<thead>
						<tr>
							<th>组名</th>
							<th>组性质</th>
							<th>创建时间</th>
							<th>组描述</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="adminuserGrouptablebodyDiv">
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${prefix}/lib/bootstrap/js/bootstrap.js"></script>
	<!-- 用户组创建 -->
	<div id="myGroupDetailsDiv" class="reveal-modal" style="width: 200px;height: 200px;">
		<label style="padding: 5px;margin: 0px;">组名称：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="groupname_create" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">组描述：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="groupremark_create" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">
			<button id="myGroupDetailsButton" onclick="crateUseradminGroup()" class="btn btn-primary"><i class="icon-save"></i> Save </button>
		</label>
		<a class="close-reveal-modal">×</a>
	</div>
	
	<!-- 用户组修改 -->
	<div id="myGroupModifyDiv" class="reveal-modal" style="width: 200px;height: 200px;">
		<input type="hidden" id="groupid_modify" value=""/>
		<label style="padding: 5px;margin: 0px;">组名称：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="groupname_modify" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">组描述：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="groupremark_modify" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">
			<button id="myGroupModifyButton" onclick="modifyUseradminGroup()" class="btn btn-primary"><i class="icon-save"></i> Save </button>
		</label>
		<a class="close-reveal-modal">×</a>
	</div>
</div>
</body>
</html>